<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    list: any
    label?: string
    valueName?: string
    modelValue?: string[]
  }>(),
  {
    label: 'label',
    valueName: 'label',
  },
)

const checkList = ref<{ label: string; value: string; check: boolean }[]>([])
watchEffect(() => {
  checkList.value = props.list.map((item) => {
    return {
      ...item,
      label: item[props.label],
      value: item[props.valueName],
      check: false,
    }
  })
})

const emit = defineEmits(['update:modelValue'])

function tagItemClick(index: number) {
  checkList.value[index].check = !checkList.value[index].check
  const _list = checkList.value.filter((item) => item.check).map((item) => item.value)
  emit('update:modelValue', _list)
}
</script>

<template>
  <wd-row :gutter="18">
    <wd-col :span="8" v-for="(item, index) in checkList" :key="index">
      <view class="tag-item" :class="{ 'active-item': item.check }" @click="tagItemClick(index)">
        <view class="text-style">
          {{ item.label }}
        </view>
      </view>
    </wd-col>
  </wd-row>
</template>

<style lang="scss" scoped>
.tag-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64rpx;
  padding: 0 16rpx;
  margin-bottom: 20rpx;

  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 24rpx;
  font-weight: 400;
  color: #6a707c;

  background: #ffffff;
  border: 2rpx solid #ebedf2;
  border-radius: 8rpx;
}

.text-style {
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 禁止换行 */
}

.active-item {
  background: #eeffff;
  border: 2rpx solid #95e2e4;
}
</style>
